import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getSchemas } from 'redux/modules/schemas';

@connect(
  state => ({ schemas: state.schemas.data }),
  dispatch => bindActionCreators({ getSchemas }, dispatch))

export default class AdminBar extends Component {
  static propTypes = {
    schemas: PropTypes.array,
    getSchemas: PropTypes.func.isRequired
  }

  componentWillMount() {
    this.props.getSchemas();
  }

  renderSchemaItem() {
    const schemas = this.props.schemas;
    if (schemas) {
      return (
        schemas.map((item, key) => {
          return (
            <li key={key}><Link to={'/classes/' + item.className}>{item.className}</Link></li>
          );
        })
      );
    }
  }

  render() {
    const styles = require('./AdminBar.scss');
    return (
      <div className={styles.adminBar}>
        <ul className={styles.navList + ' list-unstyled'}>
          <li key={1}><Link to=""><i className="fa fa-clock-o" aria-hidden="true"></i>财务对账</Link></li>
          <li key={2}>
            <div className={styles.lable}>数据分析</div>
            <ul className="list-unstyled">
               {this.renderSchemaItem()}
            </ul>
          </li>
          <li key={3}>
            <div className={styles.lable}>数据分析</div>
            <ul className="list-unstyled">
              <li key={2.1}><Link to="">基础统计</Link></li>
              <li key={2.2}><Link to="">高级统计</Link></li>
              <li key={2.3}><Link to="">交易数据</Link></li>
            </ul>
          </li>
          <li key={4}><Link to=""><i className="fa fa-list-alt" aria-hidden="true"></i>账户系统</Link></li>
        </ul>
      </div>
    );
  }
}
